<template>
  <div class="employee-list-container">
    <!-- 页面标题和搜索功能 -->
    <div class="header-section">
      <h1>员工列表</h1>
      <div class="search-container">
        <input
            type="text"
            v-model="searchQuery"
            placeholder="搜索员工姓名或部门..."
            class="search-input"
        />
        <button class="search-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
        </button>
      </div>
    </div>

    <!-- 员工卡片网格 -->
    <div class="employee-grid">
      <!-- 加载状态 -->
      <div v-if="isLoading" class="loading-container">
        <div class="loader"></div>
        <p>加载员工数据中...</p>
      </div>

      <!-- 空状态 -->
      <div v-else-if="filteredEmployees.length === 0" class="empty-state">
        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="2">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
          <circle cx="12" cy="7" r="4"></circle>
        </svg>
        <p>未找到匹配的员工</p>
        <button @click="clearSearch" class="reset-button">重置搜索</button>
      </div>

      <!-- 员工卡片列表 -->
      <div
          v-else
          :key="employee.id"
          v-for="employee in filteredEmployees"
          class="employee-card"
      >
        <div class="employee-image-container">
          <img
              :src="employee.avatar"
              :alt="employee.name"
              class="employee-avatar"
              @error="handleImageError($event)"
          />
          <div class="employee-status" :class="employee.status"></div>
        </div>

        <div class="employee-info">
          <h3 class="employee-name">{{ employee.name }}</h3>
          <p class="employee-position">{{ employee.position }}</p>
          <p class="employee-department">{{ employee.department }}</p>

          <div class="employee-meta">
            <div class="meta-item">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="16" y1="2" x2="16" y2="6"></line>
                <line x1="8" y1="2" x2="8" y2="6"></line>
                <line x1="3" y1="10" x2="21" y2="10"></line>
              </svg>
              <span>{{ formatDate(employee.joinDate) }}</span>
            </div>

            <div class="meta-item">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
              </svg>
              <span>{{ employee.email }}</span>
            </div>
          </div>
        </div>

        <div class="employee-actions">
          <button class="action-button view-button">查看详情</button>
          <button class="action-button edit-button">编辑</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import request from "@/utils/request.js";

// 状态管理
const searchQuery = ref('');
const isLoading = ref(true);
const employees = ref([]);





// 模拟数据加载
onMounted(() => {


     request.get('http://test.org/test/emp/list').then((res) => {
        console.log(res);
         employees.value = res;
         isLoading.value = false;
     })

});


// 处理图片加载错误
const handleImageError = (e) => {
  e.target.src = 'https://picsum.photos/seed/default/200/200';
};

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

// 过滤员工数据
const filteredEmployees = computed(() => {
  if (!searchQuery.value) return employees.value;

  const query = searchQuery.value.toLowerCase();
  return employees.value.filter(employee =>
      employee.name.toLowerCase().includes(query) ||
      employee.department.toLowerCase().includes(query) ||
      employee.position.toLowerCase().includes(query)
  );
});

// 清除搜索
const clearSearch = () => {
  searchQuery.value = '';
};

</script>

<style scoped>
.employee-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

h1 {
  color: #2c3e50;
  margin: 0;
  font-size: 1.8rem;
}

.search-container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 350px;
}

.search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: #3498db;
}

.search-button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: #2980b9;
}

.employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.employee-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.employee-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.employee-image-container {
  position: relative;
  padding: 1.5rem;
  background-color: #f8f9fa;
  display: flex;
  justify-content: center;
}

.employee-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.employee-status {
  position: absolute;
  bottom: 28px;
  right: 40%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid white;
}

.employee-status.active {
  background-color: #2ecc71;
}

.employee-status.inactive {
  background-color: #e74c3c;
}

.employee-info {
  padding: 1.25rem;
  flex: 1;
}

.employee-name {
  margin: 0 0 0.5rem 0;
  color: #2c3e50;
  font-size: 1.25rem;
}

.employee-position {
  margin: 0 0 0.25rem 0;
  color: #34495e;
  font-weight: 500;
}

.employee-department {
  margin: 0 0 1rem 0;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.employee-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f1f1;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #7f8c8d;
  font-size: 0.85rem;
}

.employee-actions {
  display: flex;
  padding: 1rem;
  gap: 0.5rem;
  background-color: #f8f9fa;
  border-top: 1px solid #eee;
}

.action-button {
  flex: 1;
  padding: 0.6rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.view-button {
  background-color: #3498db;
  color: white;
}

.view-button:hover {
  background-color: #2980b9;
}

.edit-button {
  background-color: white;
  color: #3498db;
  border: 1px solid #3498db;
}

.edit-button:hover {
  background-color: #f1f9ff;
}

.loading-container {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: #7f8c8d;
}

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #f3f3f3;
  border-bottom-color: #3498db;
  border-radius: 50%;
  animation: rotation 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: #7f8c8d;
  text-align: center;
}

.empty-state p {
  margin: 1rem 0 1.5rem 0;
  font-size: 1.1rem;
}

.reset-button {
  padding: 0.6rem 1.2rem;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.reset-button:hover {
  background-color: #2980b9;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .employee-list-container {
    padding: 1rem;
  }

  .header-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-container {
    width: 100%;
    max-width: none;
  }

  .employee-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}
</style>